import { Button, Flex, Form, Input, message } from "antd";
import React, { useState } from "react";
import { login, LoginReq } from "../server/api/user";
import { runAction } from '../parts/ui';
import { FormProps } from "antd/lib";
import { useNavigate } from "react-router-dom";


export const Login: React.FC = () => {

  const [loading, setLoading] = useState(false);
  const nav = useNavigate();
  const onLogin: FormProps<LoginReq>['onFinish'] = async (req) => {
    setLoading(true);
    await runAction('登陆', '登陆中...', async () => {
      const ts = await login(req);
      console.log(ts);
      nav("/home");
    });
    setLoading(false);
  }

  return (
    <>
      <Flex vertical={true}  
        style={{ width: '100%', marginTop: '10vh' }}
        >
        <label style={{ alignSelf: 'center', fontSize: '25px' }}>设备管理登陆</label>
        <Form
          labelCol={{ span: 9 }}
          wrapperCol={{ span: 6 }}
          onFinish={onLogin}
          style={{ width: '100%', marginTop: '20px' }}
        >
          <Form.Item<LoginReq>
            label="账号"
            name={"account"}
            rules={[{ required: true, message: '请输入账号' }]}
          >
            <Input allowClear={true} />
          </Form.Item>

          <Form.Item<LoginReq>
            label="密码"
            name={"pwd"}
            rules={[{ required: true, message: '请输入密码' }]}
          >
            <Input.Password allowClear={true} />
          </Form.Item>
          <Form.Item wrapperCol={{ offset: 9 }}>
            <Button loading={loading} type={'primary'} htmlType={'submit'}>登陆</Button>
          </Form.Item>
        </Form>
      </Flex>


    </>


  )
}